<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/babel">
        let VDOM = <h1>Hello.react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))

        console.log(typeof VDOM);  //object
        console.log(VDOM instanceof Object);  //true
        
        // 对比虚拟dom和真实dom
        const TDOM = document.getElementById('test')
        console.log('虚拟dom',VDOM);
        console.log('真实dom:',TDOM);
        debugger;

        /*
            关于虚拟dom和真实dom的区别
                1、虚拟 dom 比较轻，真实dom比较重，因为虚拟dom是react在用的，无需真实dom上的那么多的属性
                2、虚拟dom最终一定会转为真实dom放入页面
        
        */ 

    </script>
    
</body>
</html>